import {h, render} from "vue";
import {message, notification, Progress} from "ant-design-vue";

export const DialogUtils = {

}

export const NotificationUtils = {
    success: (title: string, content: string, duration = 3) => {
        notification.destroy();
        notification.success({
            message: title,
            description: content,
            duration,
        });
    },

    error: (title: string, content: string, duration = 3) => {
        notification.destroy();
        notification.error({
            message: title,
            description: content,
            duration,
        });
    },

    info: (title: string, content: string, duration = 3) => {
        notification.destroy();
        notification.info({
            message: title,
            description: content,
            duration,
        });
    },

    warning: (title: string, content: string, duration = 3) => {
        notification.destroy();
        notification.warning({
            message: title,
            description: content,
            duration,
        });
    },
}

export const MessageUtils = {
    success: (content: string, duration = 3) => {
      message.success({
        content,
        duration,
        });
    },
    error: (content: string, duration = 3) => {
      message.error({
        content,
        duration,
        });
    },
    info: (content: string, duration = 3) => {
      message.info({
        content,
        duration,
        });
    },
    warning: (content: string, duration = 3) => {
      message.warning({
        content,
        duration,
        });
    },
}



type statusTypes = "normal" | "active" | "success" | "exception";
class ProgressClass {
    _container:HTMLElement = document.body;
    _timer = 0;
    _hasMounted = false;

    _mountNode (percent: number = 0, status: statusTypes) {
        const progressNode = h(Progress, {
            type: "line",
            percent: percent,
            showInfo: false,
            status: status,
            class: "ldn-progress",
            size: "small"
        });
        // 将 progressNode 渲染到 container 中
        render(progressNode, this._container);
        this._hasMounted = true;
    }
    _unmountNode () {
        // 卸载 progressNode
        render(null, this._container);
        this._hasMounted = false;
    }
    start (parent?: string) {
        const container = parent ? <HTMLElement>document.querySelector(parent) : document.body;
        if (!container) return;
        this._container = container;
        this._mountNode(0, "active");
        let percent = 0;
        this._timer = setInterval(() => {
            percent += 3;
            if (percent >= 99) {
                return;
            }
            this._mountNode(percent, "active");
        }, 300);
    }

    success() {
        if (this._timer) {
            clearInterval(this._timer);
        }
        this._mountNode(100, "success");
        this.close();
    }

    error() {
        if (this._timer) {
            clearInterval(this._timer);
        }
        this._mountNode(100, "exception");
        this.close();
    }

    close() {
        if (this._timer) {
            clearInterval(this._timer);
        }
        setTimeout(() => {
            this._unmountNode();
            this._container = document.body;
        }, 800);

    }
}
export const ProgressUtils = new ProgressClass();